<template>
  <el-form ref="form"  :model="form" label-width="80px">
    <el-form-item label="单词">
      <el-col :span="6">
          <el-input v-model="form.word" style="width:200px;text-align:left;"></el-input>
      </el-col>
      <el-col :span="6" :inline="true">
          等级：<el-rate v-model="form.star" style="display:inline-block"></el-rate>
      </el-col>
      <el-col :span="4" :inline="true">
          <el-switch ative-text="继续学习" inactive-text="已经掌握" v-model="form.success"></el-switch>
      </el-col>
      <el-col :span="8" :inline="true">
          学习次数：<el-progress style="width:150px;display:inline-block;" :inline="true" :percentage="form.classtime" :colors="percentcolors"></el-progress>
      </el-col>
    </el-form-item>
    <el-form-item label="中文解释">
      <el-select v-model="region" placeholder="词性" style="width:150px">
        <el-option v-for="item in propOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input v-model="tempInputExplanation" style="width:400px;text-align:left;"></el-input>
      <el-button type="primary" @click="addExplanation">添加解释</el-button>
    </el-form-item>
    <el-form-item v-for="(item,index) in form.explanations" :key="index">
        <el-tag>{{item.property}}</el-tag>
        <el-input v-model="item.explanation" style="width:400px;text-align:left;"></el-input>
        <el-button type="danger" icon="el-icon-delete" @click="deleteExplanation(item)"></el-button>
    </el-form-item>
    <el-form-item label="近义词">
        <el-tag closable v-for="synonym in form.synonym" :key="synonym" @close="closeTag(synonym,form.synonym)">{{synonym}}</el-tag>
        <el-input @blur="handleInputConfirm('synonym')" @keyup.enter.native="handleInputConfirm('synonym')" ref="saveTagInputSynonym" v-if="inputVisibleSynonym" class="input-new-tag" v-model="inputSynonym"></el-input>
        <el-button v-else class="button-new-tag"  @click="showInput('synonym')" type="primary">+ New synonym</el-button>
    </el-form-item>
    <el-form-item label="反义词">
        <el-tag type="success" closable v-for="antonym in form.antonym" :key="antonym" @close="closeTag(antonym,form.antonym)">{{antonym}}</el-tag>
        <el-input @blur="handleInputConfirm('antonym')" @keyup.enter.native="handleInputConfirm('antonym')" ref="saveTagInputAntonym" v-if="inputVisibleAntonym" class="input-new-tag" v-model="inputAntonym"></el-input>
        <el-button v-else class="button-new-tag"  @click="showInput('antonym')" type="success">+ New antonym</el-button>
    </el-form-item>
    <el-form-item label="词组短语">
        <el-tag type="warning" closable v-for="phrase in form.phrase" :key="phrase" @close="closeTag(phrase,form.phrase)">{{phrase}}</el-tag>
        <el-input @blur="handleInputConfirm('phrase')" @keyup.enter.native="handleInputConfirm('phrase')" ref="saveTagInputPhrase" v-if="inputVisiblePhrase" class="input-new-tag" v-model="inputPhrase"></el-input>
        <el-button v-else class="button-new-tag"  @click="showInput('phrase')" type="warning">+ New phrase</el-button>
    </el-form-item>
    <el-form-item label="例句">
      <el-input v-model="tempInputSentence" style="width:400px;text-align:left;"></el-input>
      <el-button type="primary" @click="addSentence">添加</el-button>
    </el-form-item>
    <el-form-item v-for="(it,index) in form.sentence" :key="index">
        <el-input v-model="form.sentence[index]" style="width:400px;text-align:left;"></el-input>
        <el-button type="danger" icon="el-icon-delete" @click="deleteSentence(it)"></el-button>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea" v-model="form.remarks[0]"></el-input>
    </el-form-item> 
    <el-form-item>
      <el-button type="primary" @click="onSubmit">{{buttontxt}}</el-button>
      <el-button @click="close">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
        tempInputSentence:'',
        tempInputExplanation:'',
        inputVisibleSynonym:false,
        inputVisibleAntonym:false,
        inputVisiblePhrase:false,
        inputSynonym:'',
        inputAntonym:'',
        inputPhrase:'',
        region: "n.",
      
        percentcolors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
      propOptions:[
        {value:'n.',label:'名词n.'},{value:'vt.',label:'及物动词vt.'},{value:'vi.',label:'非及物动词vi.'},{value:'adj.',label:'形容词adj.'},{value:'adv.',label:'副词adv.'}
      ],
    };
  },
  computed:{
    ...mapGetters("user",{
         form:'form1'
    }),
    buttontxt(){
      if(this.paneltype=='add')
        return '添加新单词';
      else
        return '更新单词';
    }
  },
  mounted(){
    console.log('mounted');
    console.log(this);
  },
  created(){
    console.log('created');
  },
  props:{
    formdata:{
      type:Object
    },
    paneltype:{type:String}
  },
  methods: {
    setFromData(formdata){
      this.$emit('setFormData_fromsub');
    },
    reset(){
      console.log('reset');
      //this.$emit('resetFromSub');
    },
    onSubmit() {
      console.log("submit!");
      if(this.paneltype=='add'){
        if(this.tempInputExplanation.length > 0)
           this.addExplanation();
        this.$emit('submitFromSub',this.form);
      }else{
        this.$emit('updateFromSub',this.form);
      }
      this.reset();
    },
    addSentence(){
      this.form.sentence.push(this.tempInputSentence);
      this.tempInputSentence ="";
    },
    addExplanation(){
        this.form.explanations.push({
            property:this.region,
            explanation:this.tempInputExplanation,
            id:Date.now()
        });
        this.tempInputExplanation = "";
    },
    deleteExplanation(item){
        let index = this.form.explanations.findIndex(element=>element._id==item._id);
        if(index !== -1)
          this.form.explanations.splice(index,1);
    },
    deleteSentence(item){
        let index = this.form.sentence.findIndex(element=>element==item);
        if(index !== -1)
          this.form.sentence.splice(index,1);
    },
    showInput(tag){
      if(tag == 'synonym'){
        this.inputVisibleSynonym = true;
        console.log(this.$refs.saveTagInputSynonym);
        this.$nextTick(()=>{
            this.$refs.saveTagInputSynonym.focus();
        });
      }else if(tag=='antonym'){
        this.inputVisibleAntonym = true;
        this.$nextTick(()=>{
            this.$refs.saveTagInputAntonym.focus();
        });
      }else if(tag=='phrase'){
        this.inputVisiblePhrase= true;
        this.$nextTick(()=>{
            this.$refs.saveTagInputPhrase.focus();
        });
      }
    },
    handleInputConfirm(tag){
      if(tag=='synonym'){
        let synonym = this.inputSynonym;
        if(synonym)
          this.form.synonym.push(synonym);
        this.inputVisibleSynonym = false;
        this.inputSynonym="";
      }else if(tag=='antonym'){
        let antonym = this.inputAntonym;
        if(antonym)
          this.form.antonym.push(antonym);
        this.inputVisibleAntonym = false;
        this.inputAntonym="";
      }else if(tag=='phrase'){
        let phrase = this.inputPhrase;
        if(phrase)
          this.form.phrase.push(phrase);
        this.inputVisiblePhrase = false;
        this.inputPhrase="";
      }
    },
    closeTag(tag,tags){
      tags.splice(tags.indexOf(tag),1);
    },
    close(){
      console.log('close');
      this.$emit('wordeditCancel');
    }
  }
};
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>